<template>
  <div>
    <!--** 分页 ***-->
    <div id="wdsc-page"></div>
    <!--** 分页 end ***-->
  </div>
</template>
<script>
export default {
  props: {
    pageNum: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 10
    },
    total: {
      type: Number,
      default: 50
    },
    changePage: Function
  },
  mounted () {
    this.showPage()
  },
  methods: {
    showPage () {
      let that = this
      let laypage = null
      let layui = window.layui
      layui.use('laypage', function () {
        laypage = layui.laypage
        // 执行一个laypage实例
        laypage.render({
          elem: 'wdsc-page',
          count: that.total, // 数据总数，从服务器端得到
          curr: that.pageNum,
          limit: that.pageSize // 每页显示的条数
        })
      })

      layui.laypage.render({
        elem: 'wdsc-page',
        count: that.total, // 数据总数，从服务端得到
        curr: that.pageNum,
        limit: that.pageSize, // 每页显示的条数
        jump: function (obj, first) {
          // 首次不执行
          if (!first) {
            // do something
            that.$emit('changePage', obj.onr)
          }
        }
      })
    }
  }
}
</script>
